import React, { useState, lazy, Suspense, useContext, useEffect } from 'react'
// 导入路由 
import  { Route, Link,useHistory} from 'react-router-dom'
// 导入样式
import './index.css'
// 导入reducer
import { Context } from '../../App'
  const tabs = [
    {
      title: '首页',
      icon: 'icon-ind',
      path: '/home',
      component: lazy(() => import('../Citylist'))
    },
    {
      title: '找房',
      icon: 'icon-findHouse',
      path: '/home/list',
      component: lazy(() => import('../Citylist'))
    },
    {
      title: '购物车',
      icon: 'icon-infom',
      path: '/home/news',
      component: lazy(() => import('../Citylist'))
    },
    {
      title: '我的',
      icon: 'icon-my',
      path: '/home/profile',
      component: lazy(() => import('../Citylist'))
    }
  ]
  
const News = lazy(() => import('../News'))
const Index = lazy(() => import('../Index'))
const HouseList = lazy(() => import('../List'))
const Profile = lazy(() => import('../Profile'))

export default function Home () {
    
    const app = useContext(Context)
    // 点击高亮
    const [acIndex, setIndex] = useState(0)
    const history = useHistory()
    // 底部栏跳转
    useEffect(() => {
        console.log(history.location.pathname, '路由阐述')
        switch (history.location.pathname) {
			case '/home':
				setIndex(0)
				break
			case '/home/list':
				setIndex(1)
				break
			case '/home/news':
				setIndex(2)
				break
			case '/home/profile':
				setIndex(3)
				break
		}
    },[])
    function goPath (params,index) {
        return () => {
            setIndex(index)
            history.push(params.path)
        }
    }
    return (
		<div className='home'>
			{/* 顶部信息*/}
			<div className='homeHeader'>
				
					{/* <Suspense fallback={<h3 className='loading'>Loading...</h3>}> */}
						<Route path='/home/news' component={News} />
						<Route exact path='/home' component={Index} />
						<Route path='/home/list' component={HouseList} />
						<Route path='/home/profile' component={Profile} />
					{/* </Suspense> */}
	
			</div>
			{/*底部tabar */}
			<div className='taberDiv'>
				<div className='taber'>
					{
						//   点击项
              
              
              
              
              
              
              
              
              
              
              
						tabs.map((item, index) => {
							return (
								<div className='tabar-item' key={index} onClick={goPath(item, index)}>
									<span className={`icon iconfont ${item.icon} ${acIndex === index ? 'active' : ''}`}></span>
									<span className={`${acIndex === index ? 'active' : ''}`}>{item.title}</span>
									{index === 2 ? <span className='huibiao' style={app.state.length===0 ? {display: 'none'}: {}}>{app.state.length}</span> : ''}
								</div>
							)
						})
					}
				</div>
			</div>
		</div>
	)
}
